class Popup{
    $(ele){
        return document.querySelector(ele)
    }
    close(){
        let close = this.$('.close')
        close.addEventListener('click',()=>{
            this.div.style.display = 'none'
        })  
    }
    alert(obj){
        if(typeof obj.el === 'string'){
            this.el = document.querySelector(obj.el)
        }else{
            this.el = obj.el
        }
        this.title = obj.title || '默认标题内容'
        this.content =obj.content || '提示内容'
        console.log(this.content)
        console.log(this.title)
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            console.log(this)
            this.div.style.display = 'block'
            this.div.innerHTML = `<div class="content">
                    <h3>${this.title}</h3>
                    <p>${this.content}</p>
                    <div><button>确定</button></div>
                    <div class="close">✖</div>
                </div>`
            this.close()
            this.btn2()
        })
    }
    html(){
        return `<div class="content">
                    <h3>${this.title}</h3>
                    <p></p>
                    <div><button>确定</button></div>
                    <div class="close">✖</div>
                </div>`
    }
    btn2(){
        let btn = this.$('.add button')
        btn.addEventListener('click',()=>{
            this.div.style.display = 'none'
        })
    }
    confirm(obj){
        if(typeof obj.el === 'string'){
            this.el = document.querySelector(obj.el)
        }else{
            this.el = obj.el
        }
        this.title = obj.title || '默认标题内容'
        this.content =obj.content || ''
        this.btn = obj.btn || ['确认','取消']
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            this.div.style.display = 'block'
            this.div.innerHTML = this.html1()
            this.close()
            this.btns()
        }) 
    }
    html1(){
        return `<div class="content">
                    <h3>${this.title}</h3>
                    <p>${this.content}</p>
                    <div>${this.btn.map((item)=>{
                        return `<button>${item}</button>`
                     }).join('')}</div>
                    <div class="close">✖</div>
                </div>`
    }
    btns(){
        let btns = [...document.querySelectorAll('.add button')]
        btns.forEach((btn)=>{
            btn.addEventListener('click',()=>{
                confirm(`你点击了${btn.innerHTML}`)
                this.div.style.display = 'none'
            })
        })
    }
    msg(obj){
        if(typeof obj.el === 'string'){
            this.el = document.querySelector(obj.el)
        }else{
            this.el = obj.el
        }
        if(obj.icon === undefined){
            this.icon = ''
        }else{
            this.icon = obj.icon == 1? '✓' : '✖'
        }
        this.time = obj.time || 2000 
        this.content = obj.content || '提示内容'
        this.color = obj.icon == 1? 'greey' : 'red'
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            this.div.style.display = 'block'
            this.div.innerHTML = `<div class="content1">
                                        <span>${this.icon}</span>
                                        <p>${this.content}</p>
                                    </div>`
            this.$('span').style.color = this.color
            setTimeout(()=>{
                this.div.style.display = 'none'
            },this.time)
        }) 
    }
}
let popup = new Popup()
// popup.alert({el:'.alert1'})
// popup.alert({el:'.alert2',title:'自己设置标题',content:'弹窗内容'})
// popup.confirm({el:'.confirm1'})
// popup.confirm({el:'.confirm2',btn:['ok','no']})
// popup.msg({el:'.msg1'})
// popup.msg({el:'.msg2',icon:'1', content:'成功状态'})
// popup.msg({el:'.msg3',icon:'0',time: 5000,content:'失败状态，5s后关闭'})